<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="task-search">
            <div class="task-query">
                <a-form-item label="开始时间">
                    <!-- <day-range @change="(data)=>this.created_at = data" :constantTime="created_at" :style="{display: 'inline'}"></day-range> -->
                    <a-range-picker v-decorator="['created_at', {
                        rules: [{ type: 'array', required: false, message: 'Please select time!' }],
                    }]" style="width: 240px;"/>
                </a-form-item>
                <a-form-item>
                    <a-input placeholder="请输入任务信息、订单号信息或服务号信息" v-decorator="['name']" style="width: 200px;"/>
                </a-form-item>
                <a-form-item>
                    <a-select
                          v-decorator="['service_id']"
                          placeholder="服务号名称"
                    >
                        <a-select-option v-for="v in services" :key="v.id" :value="v.id">
                            {{v.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select
                          v-decorator="['type_id']"
                          placeholder="任务类型"
                    >
                        <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                            {{v.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select
                          v-decorator="['status']"
                          placeholder="任务状态"
                    >
                        <a-select-option v-for="(v,k) in statuses" :key="k" :value="k">
                            {{v}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit" style="width: 100px;">
                        筛选
                    </a-button>
                </a-form-item>
            </div>
        </a-form>

        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <!-- <template slot="is_monitor" slot-scope="record">
                <i v-if="record.is_monitor=='是'" style="color: #FF5151">{{record.is_monitor}}</i><i v-else>{{record.is_monitor}}</i>
            </template> -->
            <!-- <template slot="startAndEnd" slot-scope="text, record">
                <p>{{record.start_end.split('-')[0]}} - </p>
                <p>{{record.start_end.split('-')[1]}}</p>
            </template> -->
            <template slot="msg" slot-scope="text, record">
                <p>{{record.msg || '暂无'}}</p>
            </template>
            <template slot="task" slot-scope="record">
                <i v-if="record.is_urgent == '1'" style="color:#FF5151">{{record.order_name}}<p>{{record.sn}}</p></i>
                <i v-else>{{record.order_name}}<p>{{record.sn}}</p></i>
            </template>
            <template slot="action" slot-scope="text, record">
                <router-link :to="'/task/update/'+record.id" v-if="menu_role.includes('/task/update')"><a-badge v-if="record.had_push"  dot><img src="./../../assets/images/view.svg" alt=""></a-badge> <span v-else><img src="./../../assets/images/view.svg" alt=""></span></router-link>
            </template>
        </a-table>
    </div>
</template>
<script>
    import DayRange from "@/components/dayRange";
    import moment from "moment";

    export default {
        components:{DayRange},
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                columns: [
                    {title: '任务', scopedSlots: {customRender: 'task'}, align: 'center'},
                    {title: '服务号名称', dataIndex: 'service_name', align: 'center'},
                    {title: '最新进度', scopedSlots: {customRender: 'msg'}, align: 'center'},
                    // {title: '是否实时', scopedSlots: {customRender: 'is_monitor'}, align: 'center', width: '8%'},
                    //{title: '任务起止时间', dataIndex: 'start_end', scopedSlots: {customRender: 'startAndEnd'}, align: 'center'},
                    //{title: '简要地址', dataIndex: 'address', align: 'center', width: '12%'},
                    {title: '所需积分', dataIndex: 'plan_amount', align: 'center'},
                    {title: '状态', dataIndex: 'status', align: 'center'},
                    //{title: '状态时间', dataIndex: 'created_at', align: 'center', width: '6%'},
                    // {title: '报告', dataIndex: 'report_num', align: 'center', width: '6%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center'},
                ],
                form: this.$form.createForm(this),
                search: {},
                types: [],
                statuses: [],
                services: [],
                created_at: moment().format('YYYY-MM-DD') + ' ~ ' + moment().format('YYYY-MM-DD')
            }
        },

        mounted() {
            this.getList();
            this.getGoods()
            this.http("get", "service/index", {page_size: 500}).then(res => {
                this.services = res.data
            })
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http(
                    "get",
                    "task/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                //this.types = data.types;
                this.statuses = data.statuses;
                this.pagination.total = data.total_count;
            },
            /**获取产品 */
            getGoods(){
                this.http("get","goods/index",{page_size:100,status:1}).then(res=>{
                    this.types = res.data
                })
            },
            onSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1
                        // values.created_at = moment(this.created_at.split('~')[0], 'YYYY-MM-DD').format('YYYY年MM月DD日') + '-' +
                        //     moment(this.created_at.split('~')[1], 'YYYY-MM-DD').format('YYYY年MM月DD日')
                        if (values.created_at && values.created_at.length > 0) {
                            let startAt = moment(values.created_at[0]).format('YYYY年MM月DD日')
                            let endAt = moment(values.created_at[1]).format('YYYY年MM月DD日')
                            let startEndAt = startAt + '-' + endAt
                            values.created_at = startEndAt
                        } else {
                            values.created_at = undefined
                        }
                        this.search = values
                        this.getList(values)
                    }
                })
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";
    #task-search {
        .ant-input {
            width: 250px;
        }

        .ant-select {
            width: 150px;
        }
    }
    .task-query {
        min-width: 990px;
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }

    @media screen and (max-width: 1366px) {
        #task-search {
            .ant-input {
                width: 200px;
            }

            .ant-select {
                width: 100px;
            }
        }
    }
</style>
